/* 
1 分析复杂的组件的数据来源 - 肯定是接口 
  1 先从redux中获取当前城市
  2 根据当前的城市名称 来获取 城市的id 
  3 再根据id 来获取当前城市的房源条件数据!! 
2 分析接口数据
  1 分析了接口数据和ui组件的关联
  2 筛选标题都是前端自己写死(后台没有返回)
3 分析了picker组件
  分析完毕 
  1 对接口数据的格式有了了解
  2 对ui组件picker有了了解
  3 如何合成的来结合 数据和组件  
  4 数组! 完事!! 
4 实现
  1 将标题 通过数组来实现  索引改变
  2 将所有的筛选的数据源 都放在一个数组中 
5 点击确定功能
  1 用户希望 数据显示的时候 是已经进行过筛选了的 
  2 把用户筛选表单的值发送给父页面 
    父页面 再去根据这个参数 去发送请求 获取数据 
  3 分析组件和接口关系
    1 不好确定用户选择了 区域 还是 地铁 
    2 第四个筛选组件选中的值 都可以放入到 more属性中 
    3 还存在用户没有 选定筛选表单的情况 
      1 用户只选择了 租金  没有选择其他
        { 租金:1000元 ,,其他没有选的就不应该发送到后台  }
  4 把 用户选中的值拼接好成一个对象格式 发送给父页面
    {key:value}


 */

import React, { Component } from 'react';
import { connect } from "react-redux";
// import { request as axios } from "../../../utils/request";
import { request as axios } from "utils/request";
import indexCss from "./index.module.scss";
import { PickerView } from 'antd-mobile';
class Index extends Component {

  state = {
    // 标题数组
    titles: [
      { name: "区域", cols: 3 },
      { name: "方式", cols: 1 },
      { name: "租金", cols: 1 },
      { name: "筛选" }
    ],
    // 房源条件大数组(藏着4个筛选组件要的数据)
    // filterList:[[第一个筛选组件的数据],[第二个筛选组件的数据],[第三个筛选组件的数据],[第四个筛选组件的数据]],
    filterList: [],
    // 索引
    currentIndex: -1,
    // 存放四个筛选组件的 表单的值 typescript  强制要求类型统一 
    valuesList: [[], [], [], []]// 如果想要写一些很严谨的代码 思考好 这个数据的默认值 和 获取值的之后类型
  }


  async componentDidMount() {
    // 获取城市的id
    const id = (await axios.get("/area/info", { params: { name: this.props.cityName } })).data.body.value;
    // 获取当前城市所在的房源条件 
    const res = await axios.get("/houses/condition", { params: { id } });

    // 自己确认看懂了接口的返回值 和 picker-view组件对数据的要求

    const filterList = [];
    // 存放了第一个筛选组件要求的数据 
    filterList.push([
      res.data.body.area,
      res.data.body.subway
    ])

    // 存放第二个筛选组件的数据 方式 rentType
    filterList.push(res.data.body.rentType);

    // 存放第三个筛选组件的数据 租金  price
    filterList.push(res.data.body.price);

    // 存放第四个筛选组件的数据 户型 朝向 楼层 房屋亮点
    filterList.push([
      { name: "户型", list: res.data.body.roomType },
      { name: "朝向", list: res.data.body.oriented },
      { name: "楼层", list: res.data.body.floor },
      { name: "房屋亮点", list: res.data.body.characteristic },
    ]);
    this.setState({ filterList });

  }

  // 点击筛选标题事件
  titlesClick = (currentIndex) => {
    this.setState({ currentIndex });
  }

  // 隐藏大筛选组件
  hideFilterCom = () => {
    this.setState({ currentIndex: -1 });
  }

  // picker组件的值改变事件
  pickerChange = (value) => {

    const { valuesList, currentIndex } = this.state;
    valuesList[currentIndex] = value;
    this.setState({ valuesList });
    // console.log(valuesList);
    /* 
    1 state 发生了变化
    2 render 函数会重新执行
      1 PickerView 重新渲染 (能够记得起 之前选中的值 )
    3 解决它
      1 value属性
    
     */
  }

  // 第四个筛选组件的点击事件
  otherItemSelect = (item) => {
    const { valuesList, currentIndex } = this.state;

    // 判断当前选中的值是否已经添加过
    const index = valuesList[currentIndex].findIndex(v => v === item.value);
    if (index !== -1) {
      // 添加过 就删除
      valuesList[currentIndex].splice(index, 1);
    } else {
      // 否则就添加
      valuesList[currentIndex].push(item.value);
    }

    this.setState({ valuesList });
  }

  // 清除第四个选中的筛选组件的值
  clearOtherItem = () => {
    const { valuesList, currentIndex } = this.state;
    valuesList[currentIndex] = [];
    this.setState({ valuesList });
  }

  // 点击确定 事件
  submitFilter = () => {
    /* 
    1 获取用户选中的表单的值
     */
    const { valuesList } = this.state;

    // 1 获取用户选中的地铁或者区域 值  动态构造对象属性名而已
    // 1.1 知道用户选中的是地铁还是区域 
    const area_subway_key = valuesList[0][0]; // area || subway || undefined
    // console.log(valuesList);

    // 构造给父页面用的筛选 对象
    const filterParams = {
      // 第一个筛选组件
      [area_subway_key]: valuesList[0][2] === "null" ? valuesList[0][1] : valuesList[0][2],
      // 第二个筛选组件
      rentType: valuesList[1][0],
      // 第三个筛选组件
      price:valuesList[2][0],
      // 第四个筛选组件
      more:valuesList[3].join(",")
    };

    // 统一对 filterParams 对象做一个循环处理 非法的值  连同属性名都删除掉
    // undefined "null"  ""
    for (const key in filterParams) {
      // 如果发现非法的值 连同这个属性都一起删除
      if([undefined,"null",""].includes(filterParams[key])){
        delete filterParams[key];
      }
      // if(filterParams[key]===undefined||filterParams[key]===""||filterParams[key]==="null"){
      // }
    }
    
    // console.log(filterParams);
    // 发筛选组件的值发送给父页面
    this.props.filterChange(filterParams);
    this.setState({ currentIndex:-1  });
  }

  // 根据索引渲染内容
  renderContent = () => {
    const { titles, currentIndex, filterList, valuesList } = this.state;

    if (currentIndex === -1 || filterList.length === 0) {
      // 什么都不要渲染 空标签 Fragment ||  <></>
      return <></>
    } else if (currentIndex >= 0 && currentIndex <= 2) {
      // 渲染前三个筛选组件
      return <div className={indexCss.pickerview_wrap} >
        <PickerView
          data={filterList[currentIndex]}
          cols={titles[currentIndex].cols}
          onChange={this.pickerChange}
          value={valuesList[currentIndex]}
        />
        <div className={indexCss.picker_btns}>
          <span onClick={this.hideFilterCom} >取消</span>
          <span onClick={this.submitFilter} >确定</span>
        </div>
      </div>
    } else if (currentIndex === 3) {
      // 渲染最后一个筛选组件
      return <div className={indexCss.other_wrap} >
        <div onClick={this.hideFilterCom} className={indexCss.other_wrap_space}></div>
        <div className={indexCss.other_wrap_content}>
          <div className={indexCss.other_list}>
            {filterList[currentIndex].map((v, i) => <div key={i}
              className={indexCss.other_group}
            >
              <div className={indexCss.other_group_title}>{v.name}</div>
              <div className={indexCss.other_group_content}>
                {v.list.map((vv, ii) => <div
                  key={ii}
                  onClick={this.otherItemSelect.bind(this, vv)}
                  className={[
                    indexCss.other_item,
                    valuesList[currentIndex].includes(vv.value) ? indexCss.active : ''
                  ].join(" ")} >{vv.label}</div>)}
              </div>
            </div>)}
          </div>
          <div className={indexCss.other_btns}>
            <span onClick={this.clearOtherItem} >清除</span>
            <span onClick={this.submitFilter} >确定</span>
          </div>
        </div>

      </div>
    }
  }

  render() {
    const { titles, currentIndex, filterList } = this.state;
    return (
      <div>
        <div className={indexCss.main}>
          <div className={indexCss.titles}>
            {titles.map((v, i) => <div className={[
              indexCss.title_item,
              currentIndex === i ? indexCss.active : ''
            ].join(" ")}

              onClick={this.titlesClick.bind(this, i)}
              key={v.name} >{v.name}</div>)}
          </div>

          {/* 筛选组件picker-view */}
          {/* {this.renderContent()} */}
          <div className={indexCss.content}>
            <this.renderContent />
          </div>
        </div>
        {currentIndex !== -1 && <div
          onClick={this.hideFilterCom}
          className={indexCss.mask}></div>}
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  cityName: state.cityReducer.cityName
})

const mapDispatchToProps = {

}



export default connect(mapStateToProps, mapDispatchToProps)(Index);